<template>
  <div class="title_list">
    <div class="title_item" v-for="(item, index) in titleList"
         @click="titleItemClick(index)"
         :class="{active: currentIndex === index}">{{item}}</div>
  </div>
</template>

<script>
  export default {
    name: "TitleList",
    data() {
      return {
        titleList: ['相关背景', '职位描述', '职位要求', '面试准备', '简历相关'],
        currentIndex: 0,
      }
    },
    methods: {
      titleItemClick(index) {
        this.currentIndex = index
        this.$emit('titleItemClick', index)
      }
    }
  }
</script>

<style scoped>
  .title_list {
    width: 100px;
    background-color: #fff;
  }

  .title_item {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
  }

  .active {
    background-color: #002766;
    color: #fff;
  }
</style>
